<template>
  <div class="hospital">
    <div class="menu">
      <el-menu
          :default-active="route.path"
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="/hospital/register" @click="change_content('/hospital/register')">
          <el-icon><Bell /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail"  @click="change_content('/hospital/detail')">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice"  @click="change_content('/hospital/notice')">
          <el-icon><Warning /></el-icon>
          <span>预约须知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/message"  @click="change_content('/hospital/message')">
          <el-icon><ChatSquare /></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search"  @click="change_content('/hospital/search')">
          <el-icon><Search /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入用到的icon图标
import {
  Bell,
  Menu as IconMenu,
  Warning,
  ChatSquare,
  Search,
} from '@element-plus/icons-vue'
import {useRouter,useRoute} from "vue-router";
import {onMounted} from "vue";
import {useHospitalDetail} from '@/stores/modules/hospitalDetail.ts'
import {useHospitalDepartment} from "@/stores/modules/hospitalDepartment.ts";

const Detail=useHospitalDetail()
const Department=useHospitalDepartment()
onMounted(()=>{
  // 获取医院详细
  Detail.get_hospital_detail(route.query.hoscode as  string)
  Department.get_hospital_department(route.query.hoscode as  string)

})

let router=useRouter()
let route=useRoute()

// 切换路由
const change_content=(value:string)=>{
  router.push(
      {
        path:value,
        query:{
          hoscode:route.query.hoscode
        }
      }
  )
}

// 获取医院详细信息




</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  padding-top: 40px;

  .menu {
    flex: 2;
    position: fixed;
  }

  .content {
    flex: 8;
    margin-left: 200px;
  }
}
</style>